Pero... siempre hay un pero que nos complica la vida pero sin él sería muy aburrida, el pero en este caso es que al añadir el nuevo editor de comentarios queda oculto el enlace que nos lleva al antiguo editor, ese casi olvidado y que por llevar la contra a todo el mundo a mi me gusta.
El antiguo editor a pesar de no verse sigue estando en nuestra plantilla, la cuestión es hacer que ese enlace se muestre y poder de esta forma comentar con el editor que más nos agrade.
J.Miur tiene la solución (en realidad la tiene siempre) y la respuesta es la posibilidad de poder comentar simultáneamente con el antiguo editor, o como él lo llama "Al viejo estilo ..."
Yo siempre digo que es conveniente tener una copia de la plantilla y esta vez también lo hago. Así que manos a la obra nos dirigimos a nuestra plantilla en Edición de HTML y marcamos para expandir la plantilla de artilugios.
Una vez ahí buscamos:
<a expr:href='data:post.addCommentUrl'expr:onclick='data:post.addCommentOnclick'>
<data:postCommentMsg/>
</a>
En <data:postCommentMsg/>; es el mensaje que aparece por defecto o la imagen que añadimos si modificamos esta parte anteriormente.
Sustituimos <data:postCommentMsg/> por lo siguiente:
<a expr:href='"http://www.blogger.com/comment.g?blogID=XXXXXXX&postID=" + data:post.id'>
Aquí el texto "Publicar un comentario en la entrada" o imagen.
</a>
(Debe ir en una sola línea)
Donde ID debemos sustituir XXXXXXX por la ID de nuestro blog. La ID del blog la averiguamos cuando editando la plantilla observamos la dirección de nuestro navegador.
Vemos algo así:
http://www.blogger.com/html?blogID=12391076&tpl=true
Lo que aparece en negrita es la ID del blog.
Una vez hacemos todo correctamente en nuestro blog tenemos las dos opciones para comentar "Al viejo estilo" y con el nuevo editor.
Si comprobamos que el enlace al antiguo editor no aparece comprobaremos que no se encuentra dentro de ninguna etiqueta </b:if>
Un ejemplo sería:
<a expr:href='data:post.addCommentUrl'expr:onclick='data:post.addCommentOnclick'>
<data:postCommentMsg/>
</a>
</b:if>
</b:if>
</p>
</b:if>
En este caso en
<a expr:href='data:post.addCommentUrl'expr:onclick='data:post.addCommentOnclick'>
<data:postCommentMsg/>
</a>
eliminamos <data:postCommentMsg/>
Y lo siguiente:
<a expr:href='"http://www.blogger.com/comment.g?blogID=XXXXXXX&postID=" + data:post.id'>
Aquí el texto "Publicar un comentario en la entrada" o imagen.
</a>
lo añadimos a continuación de
</b:if>
</b:if>
</p>
</b:if>
Quedaría algo así:
<a expr:href='data:post.addCommentUrl'expr:onclick='data:post.addCommentOnclick'>
</a>
</b:if>
</b:if>
</p>
</b:if>
<a expr:href='"http://www.blogger.com/comment.g?blogID=XXXXXXX&postID=" + data:post.id'>texto o imagen de antiguo editor</a>
Personalizar formulario de comentarios |
|
▼ |
¿Ya tenemos el nuevo formulario de comentarios?
Entonces es el momento de darle un toque personal, para ello empezaremos por el texto de "Publicar un comentario en la entrada" un poco serio ¿verdad? si deseas añadir algo más personal haremos lo siguiente:
Nos situamos en Plantilla/Edición de HTML y marcamos la casilla para expandir la plantilla de artilugios.
Buscamos:
<b:includable id='comment-form' var='post'>
<div class='comment-form'>
<a name='comment-form'/>
<h3><data:postCommentMsg/></h3>
<p><data:blogCommentMessage/></p>
En la cuarta línea donde <h3><data:postCommentMsg/></h3> eliminamos <data:postCommentMsg/> y en su lugar escribimos el texto de nuestro agrado:
Bien, ahora vamos a personalizar el formulario, para ello debemos añadir unas líneas en las CSS ó para ser más concretos justo antes de ]]></b:skin>
.comment-form {
margin:0pt auto;
width:400px;
}
comment-form es la ventana del formulario, con margin lo centramos y con width le damos un ancho.
.comment-form h3 {
background:transparent url('url-de-la-imagen') no-repeat;
color:#B0171F;
font-size:18px;
line-height:50px;
padding:0pt 0pt 0pt 55px;
}
Estas son las propiedades del título del editor.
En background añadimos la imagen que aparece junto al texto de la cabecera "Publicar un comentario en la entrada"
En color es el color para el texto.
El tamaño de letra lo modificamos en font-size.
En line-height establecemos la altura entre líneas.
Con padding centramos el texto.
.comment-form p {
color:#A9A9A9;
font-size:14px;
text-align: center;
border:1px solid #A9A9A9;
background:url('url-de-la-imagen');
padding:3px 0pt 0px 20px;
width:380px;
}
Esta parte corresponde al mensaje del formulario podemos modificar también color del texto, tamaño de la fuente, añadir una imagen de fondo (background) o si lo preferimos podemos añadir un borde.
El grosor de un borde lo podemos variar en 1px con solid estamos indicando el tipo de borde y el color obviamente en #A9A9A9;
Si en lugar de una imagen de fondo deseamos añadir color suprimimos background:url('url-de-la-imagen'); y en su lugar añadimos background-color:#A9A9A9;
#comment-editor {
height:420px;
width:100%;
}
En comment-editor modificamos la medida del iframe, width para el ancho y height para el alto. Es muy importante que pongáis atención en el valor que se añade a height porque si añadimos un valor superior al que tenemos para las entradas el iframe del formulario saldrá incompleto.
Naturalmente la imaginación es lo que cuenta, pero con esos valores y un poco de paciencia podéis personalizar el editor, lo que siempre recomiendo es probar en otro blog y por supuesto si tienes una buena idea y deseas compartirla no te olvides de dejar un comentario con un enlace a tu blog.
Veamos algunos ejemplos de personalización:
.comment-form {
margin:0pt auto;
width:375px;
}
.comment-form h3 {
background:transparent url('url-de-la-imagen') no-repeat;
line-height:150px;
text-align: center;
font-size:25px;
color:#B0171F;
padding: 15px 20px 5px 75px;
}
#comment-editor {
height:375px;
width:100%;
}
.comment-form {
background-color:#B0171F;
padding-left:5px;
padding-right:5px;
border:1px solid #000;
margin: 0 auto;
}
.comment-form h3 {
background:url('url-de-la-imagen');
line-height:70px;
padding:0pt 35pt 35pt 55px;
}
.comment-form p {
font-size:12px;
color:#EEE9E9;
text-align: center;
border-bottom : 3px #000 double;
border-left : 3px #000 double;
background-color:#B0171F;
padding:10px 0pt 10px 10px;
width:380px;
}
#comment-editor {
height:375px;
width:550px;
}
(La imagen trae impreso el texto, podemos crearlo con un editor de imágenes)
.comment-form {
margin:0pt auto;
width:420px;
}
.comment-form h3 {
color:#fff;
}
.comment-form p {
border:8px double#DCE6C5;
background:url('url-de-la-imagen') no-repeat;
padding:30px 0pt 10px 5px;
width:370px;
height:50px;
}
#comment-editor {
height:420px;
width:100%;
}
Formulario de comentarios incrustado |
|
▼ |
Blogger Fenix: el formulario de comentarios
Solución a algunos problemas con los formularios de comentarios
¿Comenzamos?
Si tu plantilla no ha tenido demasiadas modificaciones no tendrás ningún problema siguiendo estos pasos. Accedemos al blog por Blogger Draft y nos dirigimos a Configuración/Comentarios hasta llegar a:
<:/b:includable>
Aquí añadimos el 1º código
<:b:includable id='backlinkDeleteIcon' var='backlink'>
Este es el 1º Código que añadimos
<b:includable id='comment-form' var='post'>
<div class='comment-form'>
<a name='comment-form'/>
<h3><data:postCommentMsg/></h3>
<p><data:blogCommentMessage/></p>
<iframe allowtransparency='true' expr:src='data:post.commentFormIframeSrc' frameborder='0' height='275' id='comment-editor' scrolling='auto' width='100%'/>
</div>
</b:includable>
Después buscamos el siguiente código:
<p class='comment-footer'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:postCommentMsg/>
</a>
</p>
Y lo sustituimos por este otro:
<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</p>
<p class='comment-footer'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:postCommentMsg/>
</a>
</p>
buscaremos lo siguiente:
<a expr:href='data:post.addCommentUrl'
expr:onclick='data:post.addCommentOnclick'>
Pero OJO encontraremos este mismo código dos veces, uno ubicado en
<b:includable id='backlinks' var='post'>
y otro en
<b:includable id='comments' var='post'>
El que debemos sustituir se encuentra dentro del siguiente código que es de los comentarios.
<b:includable id='comments' var='post'>
<b:include data='post' name='comments' />
Justo después añadimos lo siguiente:
<b:include data='post' name='comment-form'/>
Comprobemos ahora el resultado una vez guardados los cambios.
MagMyPic tu imagen en PORTADA |
|
▼ |
No hay mucho que explicar salvo que nunca hayáis visto algo parecido, se trata de jugar un poco y conseguir que nuestras imágenes aparezcan en las mejores portadas de todo el mundo.
El procedimiento es muy sencillo, accedemos a MagMyPic y cargamos una imagen desde el PC, escogeremos entre más de 20 portadas la que más nos guste y esperamos un poco a que la fama llegue.
No es necesario registrase para conseguir la imagen, bastará con guardarla como tenemos costumbre normalmente "Guardar imagen como..."
Existe un sistema de votación para votar las portadas creadas por los usuarios.
Los formatos de imagen permitidos pueden ser JPEG, GIF o PNG (no pueden contener desnudos, violencia o material ofensivo )
Nuevo editor de Blogger |
|
▼ |
Otra de las nuevas funciones es la carga de imágenes, el modelo de ventana ha cambiado, subimos la imagen tenemos la posibilidad de redimensionarla una vez la tenemos añadida, así como ubicarla en el lugar deseado arrastrándola.
Una nueva ventana para Link y la aplicación de barra de desplazamiento vertical también es novedad.
Lo que más me ha gustado es la función de "Vista Previa" y "Configuración de composición" a la que accedemos marcando la pestaña de Post Optión verdaderamente útil para los que mostramos códigos aunque esta última parece ser que todavía no está activa y deberemos esperar.
También en fase experimental se encuentra el maravilloso sistema de autoguardado (Autosave) que nos evitará perder nuestro trabajo en más de una ocasión.
Cambios esperados que van llegando poco a poco y son el premio a la paciencia y fidelidad de muchos usuarios de Blogger.
Visto en Vagabundia y Ojo Buscador
Tamaño de las fuentes a gusto del visitante |
|
▼ |
<script type="text/javascript">
var tgs=new Array('div','td');
var szs=new Array('xx-small','x-small','small','medium','large','x-large','xx-large');
var startSz=2;
function ts(trgt,inc) {
if (!document.getElementById) return
var d=document,
cEl=null,sz=startSz,i,j,cTags;
sz += inc;
if (sz < 0) sz=0;
if (sz > 6) sz=6;
startSz=sz;
if ( !(cEl=d.getElementById(trgt))) cEl=d.getElementsByTagName(trgt)[0];
cEl.style.fontSize=szs[sz];
for (i=0 ; i < tgs.length; i++) {
cTags=cEl.getElementsByTagName(tgs[i]);
for (j=0; j < cTags.length ; j++) cTags[j].style.fontSize=szs[sz];
}
}
</script>
<a href="javascript:ts('body',1)"> AUMENTAR </a>
<a href="javascript:ts('body',-1)"> DISMINUIR </a>
Ver efecto en funcionamiento
GRACIAS por tenerme presente... |
|
▼ |
Los premios y menciones se pusieron de moda hace tiempo, la idea no fue mala, una buena excusa para dedicar a alguien unas bonitas palabras, reconocer su trabajo y sus valores, agradecer la amistad brindada...
Los premios fueron-son una cadena imparable, no hay duda que a todos nos agrada que se acuerden de nosotros y los recibimos con alegría y satisfacción.
Recibir un premio conlleva a seguir unas reglas, una de ellas mencionar a un número determinado de blogs, personalmente nunca lo hice porque me resultaba difícil escoger entre tantos blogs, porque todos son buenos cada uno en su temática, porque de una forma u otra a todos les cuesta esfuerzo mantener un blog, porque todos tienen su espacio y ninguno eclipsa a otro, porque lo que para unos no es un mal blog para otros puede serlo...
Por todo eso decidí corresponder a cada premio pasando por alto las reglas, únicamente mencionando a la persona que lo otorgaba. Gustosamente hice mención a todos y cada uno intentando transmitir mi agradecimiento.
Han venido a recordarme que debo pasar a recoger unos cuantos premios más, eso quiere decir que durante unos cuantos días el poco tiempo que tengo para dedicar al blog debe ser exclusivamente para mencionar esos premios.
Ese es mi dilema, mi gran apuro ¿qué hacer? ¿y los comentarios? ¿qué piensas tú que esperas respuesta a tu mail? siento la sensación de estar fallando a alguien y la sensación no es agradable. He tomado la decisión que durante un tiempo y hasta que mi jornada laboral se normalice no podré postear sobre los premios.
Yo sé que lo vais a entender, pero aún así quiero pediros disculpas, y sobre todo daros las gracias y deciros que con premios o sin ellos mi cariño es muy grande.
Elegante sistema de expandir entradas |
|
▼ |
.maintext {padding:1em; border:1px solid #ddd; margin:0 20px 10px 0;}
.maintext p {padding:5px 0 0 0; margin:0;}
.maintext p.bold {font-weight:bold;}
.maintext h2 {margin:0; padding:0;}
.switch {display:block; font-size:1px; width:16px; height:16px; background:url(url-imagen-abrir); cursor:pointer;}
.off {background:url(url-imagen-cerrar);}
.hide {display:none;}
.show {position:absolute; display:block; width:500px; background:#fff; border:1px solid #000; padding:10px; margin-top:5px; z-index:500;}
.show img {float:left; padding:0 10px 10px 0;}
;
anchura de la caja expandible.background:#fff
;
color de fondo de la caja.border:1px grosor del borde.
solid #000
;
tipo de borde y color.background:url(url-imagen-abrir) : url del icono rojo (expandir).
background:url(url-imagen-cerrar) :url del icono verde (recoger)
Lo siguiente lo añadiremos antes de </head>
<script>
onload = function() {
var e, i = 0;
while (e = document.getElementsByTagName ('B') [i++]) {
if (e.className == 'switch') {
e.onclick = function () {
this.className = this.className == 'switch' ? 'switch off' : 'switch';
this.nextSibling.className = this.className == 'switch' ? 'hide' : 'show';
}
}
}
}
</script>
Nos queda el último paso, se trata de añadir en cada entrada:
<div class="maintext">
<b> Texto inicial de la entrada </b>
<b class="switch"></b>
<div class="hide">Aquí escribimos el contenido oculto</div>
</div>
Otras formas de expandir entradas:
Leer más- Read More (Con imagen)
Leer más con efecto expandir y recoger
Leer más (Read More)
Leer más o Read More para todas las plantillas de Blogger
Y el recomendado: Leer más original de Blogger.
Intelecto y filosofía |
|
▼ |